<!DOCTYPE html>
<html lang="en">
<link>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SpringBoot整合Activiti</title>
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></link>

<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<style type="text/css">
    .backStyle {
        color: red;
    }
</style>
<body>
<div ng-app="myApp">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                </button>
                <a id="page1" class="navbar-brand" onclick="createFlow()">首页</a>
            </div>

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                </button>
                <a class="navbar-brand" href="#">待认领</a>
            </div>
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                </button>
                <a class="navbar-brand" href="#">已认领</a>
            </div>
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                </button>
                <a class="navbar-brand" href="#">已完成</a>
            </div>

        </div>
    </nav>

    <div style="width: 100%; height: 500px" id="flag1">
        <a href="/models/newModel">创建一个流程</a>
        <p></p>
        <div>
            <table border="1" id="model-list" style="width: 80%;text-align: center" class="table table-hover">
                <tr>
                    <td>模型编号</td>
                    <td>模型名称</td>
                    <td>版本</td>
                    <td>创建时间</td>
                    <td>操作</td>
                </tr>
            <#list flowList as flow>
                <tr>
                    <td>${flow.id}</td>
                    <td>${flow.name}</td>
                    <td>${flow.version}</td>
                    <td>${flow.createTime?string('dd.MM.yyyy HH:mm:ss')}</td>
                    <td>
                        <a href="/editor?modelId=${flow.id}">编辑</a>
                        <a href="javascript:flowDelete('${flow.id}');">删除</a>
                        <a href="javascript:publish('${flow.id}')">发布</a>
                    </td>
                </tr>
            </#list>
            </table>
            <p></p>
            <p></p>
        </div>
        <div>
            <h4>部署列表</h4>
            <p></p>
            <table border="1" id="deployment-list" style="text-align: center;width:80%;" class="table table-hover">
                <tr>
                    <td>编号</td>
                    <td>名称</td>
                    <td>部署时间</td>
                    <td>操作</td>
                </tr>
            <#list  deployList as deploy>
                <tr>
                    <td>${deploy.id}</td>
                    <td>${deploy.name}</td>
                    <td>${deploy.deploymentTime?string('dd.MM.yyyy HH:mm:ss')}</td>
                    <td><a href="javascript:deleteDeploy('${deploy.id}')">删除</a></td>
                </tr>
            </#list>
            </table>
        </div>
    </div>

    <div id="flag2">

    </div>
</div>

<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

<script type="text/javascript">
    $(function () {
        $("#page1").css({color: "red"});

    });


    function flowDelete(id) {
        var url = "/models/flowDelete";
        $.ajax({
            method: 'GET',
            url: url,
            dataType: "text",
            data: {"id": id},
            success: function (data) {
                location.reload();
            }
        });

    };

    function publish(id) {
        var url = "models/deploy";
        $.ajax({
            method: 'GET',
            url: url,
            dataType: "text",
            data: {"id": id},
            success: function (data) {
                if (data == "success") {
                    location.reload();
                } else {
                    alert(data);
                }

            }
        })

    };

    function deleteDeploy(id) {
        var url = "models/deleteDeploy";
        $.ajax({
            method: 'GET',
            url: url,
            dataType: "text",
            data: {"id": id},
            success: function (data) {
                location.reload();

            }
        })
    }


</script>
</html>